<script>
import axios from "axios";

export default {
  name: "FMComponent",
  data() {
    return {
      currentSongIndex: 0,
      audioSrc:'../assets/images/dashstar-Knock2.128.mp3',
      currentDate: new Date(),
      // 需要播放的音频
      musicList: [
        {
          name: '歌曲名称',
          artist: '艺术家',
          url: '../assets/images/dashstar-Knock2.128.mp3',
          cover: '../assets/images/musicPicture.png'
        },
        {
          name: '歌曲名称',
          artist: '艺术家',
          url: '../assets/images/dashstar-Knock2.128.mp3',
          cover: '../assets/images/musicPicture2.png'
        }
      ],
      // 是否播放音乐
      playMusic: false,
      // FM 页面需要的数据
      FMData: [],
      //  导航栏默认参数
      activeIndex: '0',
      // 导航栏参数
      navList:[
          {
              name: "咨询师培训",
              path: "/fm/consultantTraining"
          },
          {
              name: "智慧生活",
              path: "/fm/smartLife"
          },
          {
              name: "素质教育",
          },
          {
              name: "身心健康",
          },
          {
              name: "免费公开课",
          }
      ],
      centerDialogVisible: false
    }
  },
  //   页面初始化后执行
  created() {
    console.log("初始化页面了~~~")
    this.getFMData();
  },
  methods: {
    //  被选中的一行
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 播放或者暂停音乐
    togglePlay() {
      const audioPlayer = this.$refs.audioPlayer;
      console.log(audioPlayer);
      if (this.playMusic) {
        console.log("暂停播放音乐" + this.playMusic);
        audioPlayer.pause();
        this.playMusic = false;
      } else {
        console.log("开始播放音乐" + this.playMusic);
        audioPlayer.play();
        this.playMusic = true;
      }
    },
    // 获取 FM页面所需要的数据
    getFMData() {
      console.log("执行了获取 FM数据 的方法")
      this.$http.get("/fm/getAllFm",
          {
            params: {
              page: 1,
              pageSize: 5
            }
          }
      ).then(res => {
        this.FMData = res.data.data;
        console.log(res.data.data);
        console.log("输出的图片地址为："+this.FMData[1].picture);
})
    },
  },
  computed:{
    currentSong() {
      return this.musicList[this.currentSongIndex];
    }
  }
}
</script>

<template>
    <div class="FM">
      <!-- 导航栏 -->
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item index="1">{{navList[0].name}}</el-menu-item>
        <el-menu-item index="2">{{navList[1].name}}</el-menu-item>
        <el-menu-item index="3">{{navList[2].name}}</el-menu-item>
        <el-menu-item index="4">{{navList[3].name}}</el-menu-item>
        <el-menu-item index="5">{{navList[4].name}}</el-menu-item>
      </el-menu>

      <!-- 设置表展示内容 -->
      <el-row>
        <!-- 所有块的展示区域 -->
        <el-col :span="8" v-for="(o, index) in FMData" :key="index" style="margin-right: 2px;">
          <!-- 每个块的展示区域 -->
          <el-card :body-style="{ padding: '0px' }" style="width: 300px; height: 220px">
            <img :src="FMData[index].picture" class="image" @click="playMedia" style="width: 80px; height: 80px;">
            <div style="padding: 14px;">
              <span>{{FMData[index].name}}</span>
              <br>
              <!-- 播放音乐 -->
              <!--src="../assets/images/dashstar-Knock2.128.mp3"-->
<!--              :src="musicList[index].url"-->
                <!--                autoplay-->
                <audio
                src="../assets/images/dashstar-Knock2.128.mp3"
                controls
                loop
                muted>
              </audio>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<style scoped>
.el-card__body{
  width: 400px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.el-col-8{
 width: 33%;
}

.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
  margin: 0 auto 10px;
}

audio{
    width: 100%;
    margin-top: 30px;
}

</style>
